<script>
export default {
  data() {
    return {
      students: [
        { id: 1, name: 'John', age: 20, country: 'USA' },
        { id: 2, name: 'Alice', age: 22, country: 'Canada' },
        { id: 3, name: 'Bob3', age: 19, country: 'UK' },
        { id: 4, name: 'Bob4', age: 19, country: 'UK' },
        { id: 5, name: 'Bob5', age: 19, country: 'UK' },
        { id: 6, name: 'Bob6', age: 19, country: 'UK' },
        { id: 7, name: 'Bob3', age: 19, country: 'UK' },
        { id: 8, name: 'Bob4', age: 19, country: 'UK' },
        { id: 9, name: 'Bob5', age: 19, country: 'UK' },
        { id: 10, name: 'Bob6', age: 19, country: 'UK' },
        // Add more student data here
      ],
      itemsPerPage: 7,
      currentPage: 1,
      searchText: '', // 用于搜索学号的文本
      searchResults: [], // 新增搜索结果数组
    };
  },
  computed: {
    displayedStudents() {
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return this.students.slice(startIndex, endIndex);
    },
    emptyRowCount() {
      return Math.max(this.itemsPerPage - this.displayedStudents.length, 0);
    },
    totalPages() {
      return Math.ceil(this.students.length / this.itemsPerPage);
    },
    studentsToDisplay() {
    const searchText = this.searchText.trim();
    if (searchText === '') {
      // 如果搜索文本为空，展示当前页的学生
      return this.displayedStudents;
    } else {
      // 否则展示搜索结果
      return this.searchResults;
    }
  },
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    search() {
    // 清空搜索结果
    this.searchResults = [];

    // 获取搜索文本
    const searchText = this.searchText.trim();

    // 如果搜索文本为空，不执行搜索
    if (searchText === '') {
      return;
    }

    // 执行搜索
    this.students.forEach(student => {
      if (student.id.toString() === searchText) {
        this.searchResults.push(student);
      }
    });

    // 如果没有搜索结果，提示用户
    if (this.searchResults.length === 0) {
      alert('未找到匹配的学生。');
    }
    },
  },
};
</script>


<template>
  <div class="page flex-column">
    <div class="control flex-row">
      <form class="search-form">
      <input type="text" v-model="searchText" placeholder="按学号搜索">
      <button @click="search">搜索</button>
      </form>
      <button @click="importStudents">导入学生信息</button>
      <button @click="exportStudents">导出学生信息</button>
    </div>

    <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>班级</th>
          <th>报告</th>
          <th>内压成绩</th>
          <th>外压成绩</th>
          <th>爆破成绩</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="student in searchResults.length ? searchResults : displayedStudents" :key="student.id">
          <td>{{ student.id }}</td>
          <td>{{ student.name }}</td>
          <td>{{ student.class }}</td>
          <td></td> <!-- 添加报告内容 -->
          <td></td> <!-- 添加内压成绩内容 -->
          <td></td> <!-- 添加外压成绩内容 -->
          <td></td> <!-- 添加爆破成绩内容 -->
          <td>
            <!-- 在此处添加操作按钮或其他内容 -->
          </td>
        </tr>
        <tr v-for="n in emptyRowCount" :key="'empty' + n">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>

    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>    
</template>








<style scoped>
.page {
  width: 100%;
  height: 100%;
}
.flex-row {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flex-sep {
  display: flex;
  justify-content: space-between;
  
}
.control {
  width: 1096px;
  height: 120px;
}
.search-form {
  width: 325px;
  height: 45px;
  margin-left: 0px;
}
.search-form>input {
  height: 45px;
  width: 218px;
  border: 1px solid #808080;
  margin: 0;
  padding: 0;
  background-color: transparent;
  outline: none;
  font-size: 16px;
  color: #333;
}
.search-form>button {
  width: 88px;
  height: 45px;
  background-color: rgb(56,148,255);
  border-radius: 2px;
  outline: none;
  border: none;
  margin-left: 15px;
}
button{
  width: 98px;
  height: 45px;
  background-color: rgb(56,148,255);
  border-radius: 2px;
  outline: none;
  border: none;
  margin-left: 15px;
}

table {
  width: 1096px;
  height: 538px;
  border-collapse: collapse;
  border: 1px solid black;
}

th, td {
  border: 1px solid #dddddd;
  text-align: center;
  width: 135px;
  height: 60px;
  font-size: 28px;
  color: black;
  /* padding: 8px; */
}

th {
  background-color: #f2f2f2;
}

/* tr:nth-child(even) {
  background-color: #f2f2f2;
} */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination button {
  margin: 0 10px;
  padding: 5px 10px;
  cursor: pointer;
}

.pagination span {
  font-weight: bold;
}
</style>
